<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input {
				font-size: 26px;
				margin-top: 20px;
			}
			body {
				background-image: url(images/grassland.png);
			}
			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>
	<body>
		<input type="button" value="按钮一" />
		<input type="button" value="按钮二" />
		<input type="button" value="按钮三" />
		<hr />
		<img id="mytank" src="images/right.png" />
		<script type="text/javascript">
			//179000529张书豪
			let btnList = document.querySelectorAll("input");
			//1
			btnList[0].addEventListener('click',function(){
				alert("javascript事件测试一");
			})
			//2
			btnList[1].addEventListener('dblclick',function(){
				this.value = "按钮二测试";
			})
			//3
			btnList[2].addEventListener('mouseover',function(){
				this.style.backgroundColor = "blue";
				this.style.color = "white";
			})
			btnList[2].addEventListener('click',function(){
				alert("javascript事件测试三");
			})
			var mytank = document.getElementById('mytank');
			/*获取坦克原始位置距页面顶端的高度
			  没有设置页面的高度和宽度，所以坦克向左和向下自由自动
			  如果设置高度，如下方法
			*/
			let tankH = mytank.offsetTop;
			window.addEventListener('keydown', function(e) {
				if (e.keyCode == 39) {
					mytank.setAttribute("src", "images/right.png");
					mytank.style.left = (mytank.offsetLeft + 10) + 'px';
					/* console.log(mytank.offsetLeft); */
				} else if (e.keyCode == 40) {
					mytank.setAttribute("src", "images/down.png");
					mytank.style.top = (mytank.offsetTop + 10) + 'px';
				} else if (e.keyCode == 38) {
					mytank.setAttribute("src", "images/up.png");
					/*如果坦克的位置小于tankH 不移动坦克*/
					if(mytank.offsetTop >= tankH){
						mytank.style.top = (mytank.offsetTop - 10) + 'px';
					}
				} else if(e.keyCode == 37){
					mytank.setAttribute("src", "images/left.png");
					/*避免坦克向左移动出屏幕*/
					if(mytank.offsetLeft >= 10){
						mytank.style.left = (mytank.offsetLeft - 10) + 'px';
					}
				}
			});
			
		</script>
	</body>
</html>
